<template>
  <div>
    <a-form @submit="handleSearch">
      <a-row :gutter="40">
        <a-col :span="3">
          <a-form-item>
            <a-input placeholder="商户单号" v-model="query.memberNo"/>
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item>
            <a-input placeholder="账户名称" v-model="query.account"/>
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item>
            <a-input placeholder="账号后四位" v-model="query.account"/>
          </a-form-item>
        </a-col>

        <a-col :span="3">
          <a-form-item>
            <a-input placeholder="交易状态" v-model="query.name"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="创建日期" v-bind="formItemLayout">
            <a-range-picker
              :placeholder="['开始日期','结束日期']"
              :ranges="{ '昨天':[moment().startOf('day').subtract(1, 'days'), moment().endOf('day').subtract(1, 'days')],'最近一周': [moment().startOf('day').subtract(1, 'weeks'), moment()], '最近一个月': [moment().startOf('day').subtract(1, 'months'), moment()] }"
              @change="onChange"
            />
          </a-form-item>
        </a-col>
        <a-col :span="5" :style="{ textAlign: 'right' }">
          <a-button type="primary" @click="reset">重置</a-button>
          <a-button type="primary" html-type="submit">查询</a-button>
          <!-- <a-button type="primary" @click="conexport">导出</a-button> -->
        </a-col>
      </a-row>
    </a-form>
    <p style="text-align:right;padding-right:20px;">总计4笔，成功2笔，成功金额10000元</p>

    <a-table
      :columns="columns2"
      :dataSource="data2"
      :pagination="false"
      :rowKey="record => record.key"
    >
      <div slot="expandedRowRender" slot-scope="record" style="margin: 0">
        <span>交易单号：{{}}</span>
        <span>交易手续费：{{}}</span>
        <span>D0服务费：{{}}</span>
        {{record.description}}
      </div>
    </a-table>
    <!-- <a-pagination
          @change="onPageChange"
          :current="pagination.current"
          :total="pagination.total"
          :pageSize="pagination.pageSize"
          style="margin-top: 10px"
    />-->
    <a-modal title="支付密码重置成功！" v-model="visible" :footer="null">
      <div style="text-align:center;">
        <a-button type="primary" @click="gologin">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";

import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
const ATabPane = ATabs.TabPane;

const columns2 = [
  { title: "创建时间", dataIndex: "ctime" },
  { title: "商户单号", dataIndex: "No" },
  { title: "账户名称", dataIndex: "No1" },
  { title: "账号", dataIndex: "No2" },
  { title: "交易金额", dataIndex: "account" },
  { title: "交易状态", dataIndex: "STATUS" }
];

const data2 = [
  {
    key: 1,
    ctime: "2019-01-20",
    time: "2018-01-02",
    No: "124235436478",
    STATUS: "交易完成",
    type: "扫码支付",
    account: "42355元",
    description:
      "My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park."
  }
];

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm
  },
  data() {
    return {
      data2,
      columns2,
      query:{},
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
          md: { span: 10 }
        }
      }
    };
  },
  watch: {},
  computed: {},
  mounted() {},
  methods: {
    moment,
    onChange(dates, dateStrings) {
      console.log("From: ", dates[0], ", to: ", dates[1]);
      console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
      this.query.time = [dateStrings[0], dateStrings[1]];
    },
    reset() {},
    conexport() {},
    callback() {},
    handleSearch() {},
    handleChange(value) {
      console.log(value);
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.visible = true;
          console.log("Received values of form: ", values);
          //   this.codeConfirm();
        }
      });
    },
    handleOk() {
      this.$router.push("/home");
    },
    gologin() {
      this.visible = false;
      this.$router.push("/home");
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}
span {
  cursor: pointer;
}
.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.ant-tabs-nav {
  float: right;
}
.content4 {
  display: flex;
  margin-bottom: 20px;
  .conleft {
    font-size: 16px;
    font-weight: 600;
    width: 180px;
  }
  .conright {
    padding: 0 20px;
    span {
      margin-right: 20px;
    }
  }
}
</style>
